<template>
  <div>
    <div class="dashboard-container">
      <!-- <div class="dashboard-text">username: {{ username }}</div>
      <div class="dashboard-text">roles: {{ roles }}</div>
      <div class="dashboard-text">authorities: {{ authorities }}</div> -->
      <div>
        <el-button
          type="primary"
          size="default"
          style="margin-right: 10px"
          @click="categoryStatus == 0 ? YearCategory(2023) : YearAll(2023)"
          >年度销售额数据</el-button
        >
        月度销售额数据：
        <el-select
          v-model="year"
          placeholder="请输入年份"
          clearable
          filterable
          @change="change"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <div style="float: right">
          <el-button
            type="primary"
            size="default"
            @click="timeStatus == 1 ? MonthCategory(year) : YearCategory(year)"
            >类别数据</el-button
          >
          <el-button
            type="primary"
            size="default"
            @click="timeStatus == 1 ? MonthAll(year) : YearAll(year)"
            >总销售额</el-button
          >
        </div>
        <div class="status">{{ nowStatus }}</div>
      </div>

      <div ref="main" style="width: 900px; height: 600px; margin: 0 auto" />
      <!-- <MyEcharts :allData="allData"></MyEcharts> -->
      <OtherEcharts :allData="allData"></OtherEcharts>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import MyEcharts from "@/components/MyEcharts.vue";
import OtherEcharts from "@/components/OtherEcharts";
import { getSaleInfoByMonth } from "@/api/dashboard";
import { mapGetters } from "vuex";

var app = {};
var option;

const posList = [
  "left",
  "right",
  "top",
  "bottom",
  "inside",
  "insideTop",
  "insideLeft",
  "insideRight",
  "insideBottom",
  "insideTopLeft",
  "insideTopRight",
  "insideBottomLeft",
  "insideBottomRight",
];
app.configParameters = {
  rotate: {
    min: -90,
    max: 90,
  },
  align: {
    options: {
      left: "left",
      center: "center",
      right: "right",
    },
  },
  verticalAlign: {
    options: {
      top: "top",
      middle: "middle",
      bottom: "bottom",
    },
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {}),
  },
  distance: {
    min: 0,
    max: 100,
  },
};
app.config = {
  rotate: 90,
  align: "left",
  verticalAlign: "middle",
  position: "insideBottom",
  distance: 15,
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance,
    };
    myChart.setOption({
      series: [
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
      ],
    });
  },
};
const labelOption = {
  // show: true,
  // position: app.config.position,
  // distance: app.config.distance,
  // align: app.config.align,
  // verticalAlign: app.config.verticalAlign,
  // rotate: app.config.rotate,
  // formatter: "{c}  {name|{a}}",
  // fontSize: 16,
  // rich: {
  //   name: {},
  // },
};

option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: [],
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ["line", "bar", "stack"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: "category",
      axisTick: { show: false },
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [],
};

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["username", "roles", "authorities"]),
  },
  data() {
    return {
      nowStatus: null,
      maxCategoryList: [],
      allData: [],
      chart: null,
      year: 2023,
      options: [
        { value: 2023 },
        { value: 2022 },
        { value: 2021 },
        { value: 2020 },
        { value: 2019 },
      ],
      timeStatus: 1, //年度数据0 月度数据1
      categoryStatus: 0, //分类数据0 总销售额1
    };
  },
  components: {
    MyEcharts,
    OtherEcharts,
  },
  created() {},
  mounted() {
    let myChart = this.$echarts.init(this.$refs.main);
    this.chart = myChart;
    this.MonthCategory(2023);
    this.getData();
  },
  methods: {
    getData() {
      getSaleInfoByMonth({ year: 2019 }).then((res) => {
        this.allData.push(res.data);
      });
      getSaleInfoByMonth({ year: 2020 }).then((res) => {
        this.allData.push(res.data);
      });
      getSaleInfoByMonth({ year: 2021 }).then((res) => {
        this.allData.push(res.data);
      });
      getSaleInfoByMonth({ year: 2022 }).then((res) => {
        this.allData.push(res.data);
      });
      getSaleInfoByMonth({ year: 2023 }).then((res) => {
        this.allData.push(res.data);
      });
    },
    change(value) {
      this.categoryStatus == 0
        ? this.MonthCategory(value)
        : this.MonthAll(value);
    },

    YearAll() {
      this.maxCategoryList = this.allData[4].saleCategoryByMonthVoList;
      let voList = [];
      this.allData.forEach((item) => {
        voList.push(item.saleCategoryByMonthVoList);
      });
      let productInfo = [];
      for (let i = 0; i < voList.length; i++) {
        let temArr = [];
        let sum = 0;

        voList[i].forEach((item) => {
          item.saleMoney.forEach((item) => {
            sum += item;
          });
        });
        temArr.push(sum);

        productInfo.push(temArr);
      }
      this.timeStatus = 0;
      this.categoryStatus = 1;
      this.nowStatus = "年度总销售额（元）";
      option.series = [];
      option.legend.data = [];
      option.legend.data = ["总销售额"];
      option.series = {
        name: "总销售额",
        type: "bar",
        barGap: 0,
        label: labelOption,
        emphasis: {
          focus: "series",
        },
        // data: this.maxCategoryList[i].saleMoney,
        data: [
          productInfo[0][0],
          productInfo[1][0],
          productInfo[2][0],
          productInfo[3][0],
          productInfo[4][0],
        ],
      };
      option.xAxis[0].data = [2019, 2020, 2021, 2022, 2023];
      this.chart.dispose();
      this.chart = this.$echarts.init(this.$refs.main);
      option && this.chart.setOption(option, true);
    },
    YearCategory() {
      this.maxCategoryList = this.allData[4].saleCategoryByMonthVoList;
      let voList = [];
      this.allData.forEach((item) => {
        voList.push(item.saleCategoryByMonthVoList);
      });
      let productInfo = [];
      for (let i = 0; i < voList.length; i++) {
        let temArr = [];

        voList[i].forEach((item) => {
          let sum = 0;

          item.saleMoney.forEach((item) => {
            sum += item;
          });
          temArr.push(sum);
        });
        productInfo.push(temArr);
      }
      this.timeStatus = 0;
      this.categoryStatus = 0;
      this.nowStatus = "年度类别销售额（元）";
      option.series = [];
      option.legend.data = [];
      for (let i = 0; i < this.maxCategoryList.length; i++) {
        option.legend.data[i] = this.maxCategoryList[i].categoryName;
        option.series[i] = {
          name: this.maxCategoryList[i].categoryName,
          type: "bar",
          barGap: 0,
          label: labelOption,
          emphasis: {
            focus: "series",
          },
          // data: this.maxCategoryList[i].saleMoney,
          data: [
            productInfo[0][i],
            productInfo[1][i],
            productInfo[2][i],
            productInfo[3][i],
            productInfo[4][i],
          ],
        };
      }
      option.xAxis[0].data = [2019, 2020, 2021, 2022, 2023];
      this.chart.dispose();
      this.chart = this.$echarts.init(this.$refs.main);
      option && this.chart.setOption(option, true);
    },
    MonthAll(year) {
      this.timeStatus = 1;
      this.categoryStatus = 1;
      this.nowStatus = year + "年月度总销售额（元）";
      getSaleInfoByMonth({ year: year }).then((res) => {
        option.legend.data = ["总销售额"];
        option.series = [
          {
            name: "总销售额",
            type: "bar",
            barGap: 0,
            emphasis: {
              focus: "series",
            },
            data: res.data.saleMoney,
          },
        ];
        option.xAxis[0].data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        this.chart.dispose();
        this.chart = this.$echarts.init(this.$refs.main);
        option && this.chart.setOption(option, true);
      });
    },
    MonthCategory(year) {
      this.timeStatus = 1;
      this.categoryStatus = 0;
      this.nowStatus = year + "年月度类别销售额";
      getSaleInfoByMonth({ year: year }).then((res) => {
        // 先清空数据
        option.series = [];
        option.legend.data = [];
        for (let i = 0; i < res.data.saleCategoryByMonthVoList.length; i++) {
          option.legend.data[i] =
            res.data.saleCategoryByMonthVoList[i].categoryName;
          option.series[i] = {
            name: res.data.saleCategoryByMonthVoList[i].categoryName,
            type: "bar",
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: res.data.saleCategoryByMonthVoList[i].saleMoney,
          };
        }
        if (res.data.saleCategoryByMonthVoList.length === 0) {
          option.legend.data = [];
          option.series = [
            {
              name: "暂无数据",
              type: "bar",
              barGap: 0,
              emphasis: {
                focus: "series",
              },
              data: res.data.saleMoney,
            },
          ];
        }
        option.xAxis[0].data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

        this.chart.dispose();
        this.chart = this.$echarts.init(this.$refs.main);
        option && this.chart.setOption(option, true);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.status {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
</style>
